---
import type { MarkdownInstance } from "astro"
import { marked } from "marked"
import FormatHTML from "../../lib/FormatHTML.astro"
import { createDocument } from "../../utils"
import { getDate } from "../../utils/get-date"
import CompanyLink from "../CompanyLink.astro"

export interface Props {
    job: MarkdownInstance<{
        title: string
        company: string
        company_link: string
        color?: string
        start_time: string
        end_time?: string
    }>
}

const { job } = Astro.props
const {
    frontmatter: {
        title,
        company,
        start_time: startTime,
        end_time: endTime,
        company_link: companyLink,
        color,
    },
} = job

const html = await marked(job.rawContent())

const month = (date: Date, with_ = false) => {
    if (with_) {
        return "января февраля марта апреля мая июня июля августа сентября октября ноября декабря".split(
            " ",
        )[date.getMonth()]
    }
    return Intl.DateTimeFormat("ru", { month: "short" })
        .format(date)
        .replace(".", "")
}
const format = (date: Date, with_ = false) =>
    `${month(date, with_)} ${date.getFullYear()}`

const period = (startTime: string, endTime?: string) => {
    const start = getDate(startTime)

    if (endTime) {
        const end = getDate(endTime)
        return [start, end].map((d) => format(d)).join(" — ")
    }
    return `с ${format(start, true)}`
}

const document = createDocument(html)
const tizer = document.getElementsByTagName("p")[0].outerHTML
const techs = Array.from(document.getElementsByTagName("ul")).pop()?.outerHTML
---

<div class="job" style={{ "--color": color }}>
    <div class="job__header">
        <div class="job__title">
            <h3>{title}</h3>
            <CompanyLink title={company} link={companyLink} />
        </div>
        <div class="trailing">
            <span class="period">{period(startTime, endTime)}</span>
        </div>
    </div>
    <div class="job__content">
        <FormatHTML html={tizer + techs} />
    </div>
</div>

<style>
    .job h3 {
        margin: 0;
        position: relative;
    }
    .job__content :global(ul) {
        margin: 0;
    }
    .period::before {
        content: " ";
    }
    .job__title {
        display: grid;
    }

    @media (600px <= width < 780px) {
        .job__header {
            display: grid;
            grid-template-columns: 1fr max-content;
            column-gap: 2em;
        }
    }
    @media (width > 950px) {
        .job__header {
            display: grid;
            grid-template-columns: 1fr max-content;
            column-gap: 2em;
        }
    }
</style>
